<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器(attribute selector)</title>
  <!-- 
  属性选择器（Attribute Selector）是CSS中一种用于选择具有特定属性的元素的选择器。以下是关于属性选择器的总结： 
 
    1.  [attribute] ：选择具有指定属性的元素，无论属性的值是什么。 
      - 例如： [target] 选择所有具有 target 属性的元素。 
    2.  [attribute=value] ：选择具有指定属性且属性值等于特定值的元素。 
      - 例如： [target="_blank"] 选择所有 target 属性值为 "_blank" 的元素。 
    3.  [attribute~=value] ：选择具有指定属性且属性值包含特定词汇的元素。 
      - 例如： [class~="button"] 选择所有 class 属性值中包含单词"button"的元素。 
    4.  [attribute|=value] ：选择具有指定属性且属性值以特定值开头或以特定值开头后紧跟连字符"-"的元素。 
      - 例如： [lang|="en"] 选择所有 lang 属性值以"en"开头的元素，如"en"或"en-us"。 
    5.  [attribute^=value] ：选择具有指定属性且属性值以特定值开头的元素。 
      - 例如： [href^="https://"]选择所有 href 属性值以"https://"开头的元素。
    6.  [attribute$=value] ：选择具有指定属性且属性值以特定值结尾的元素。 
      - 例如： [src$=".jpg"] 选择所有 src 属性值以".jpg"结尾的元素。 
 
  通过使用属性选择器，可以根据元素的属性及属性值来选择特定的元素并应用样式。
  -->
  <style>
    /* 指定属性的元素 */
    [attribute] {
      color: red;
    }

    /* 指定属性等于属性值的元素 */
    [attribute=value] {
      color: blue;
    }

    /* 指定属性包含属性值的元素 */
    [attribute~=value] {
      color: green;
    }

    /* 指定属性以特定的属性值开头或以特定值开头后紧跟连字符的元素 */
    [attribute|=value] {
      color: orange;
    }

    /* 指定属性以特定的属性值开头的元素 */
    [attribute^=value] {
      color: purple;
    }

    /* 指定属性以特定的属性值结尾的元素 */
    [attribute$=value] {
      color: yellow;
    }

    [href="https://www.baidu.com"] {
      color: gray;
    }

    [href="https://www.bing.com"] {
      color: white;
    }
  </style>
</head>

<body>

  <div>my name div element</div>
  <div attribute="value">my div attribute selector</div>
  <p attribute="value">my p attribute selector</p>
  <a href="https://www.baidu.com">Baidu</a>
  <a href="https://www.bing.com">Bing</a>
</body>

</html>